<template>
  <div class="app-container">
    <!--搜索区域-->
    <el-form size="mini" :inline="true" :model="searchForm">
      <el-form-item>
        <el-input v-model="searchForm.name" placeholder="权限名称" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch" :loading="searchButtonLoading">查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-plus" @click="showDialogForm()">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" icon="el-icon-delete" @click="handleDelete()">删除</el-button>
      </el-form-item>
    </el-form>
    <!--表格区域-->
    <el-table border
              size="mini"
              v-loading="tableLoading"
              :data="tableData"
              row-key="id"
              default-expand-all
              @selection-change="handleSelectionChange">
      <el-table-column prop="id" label="ID" type="selection"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="权限名称"></el-table-column>
      <el-table-column prop="url" label="URL路径" width="200"></el-table-column>
      <el-table-column prop="type" label="类型">
        <template slot-scope="scope">
          <el-tag size="mini" :type="scope.row.type | typeTypeFilter">{{ scope.row.type | typeTextFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="parentId" label="父级ID"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" :formatter="createTimeFormatter" width="135"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" :formatter="updateTimeFormatter" width="135"></el-table-column>
      <el-table-column label="操作" width="50">
        <template slot-scope="scope">
          <i class="el-icon-edit" @click="showDialogForm(scope.row)" style="cursor: pointer"></i>
          <i class="el-icon-delete" @click="handleDelete(scope.row.id)" style="cursor: pointer"></i>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination :current-page="currentPage"
                   :page-size="pageSize"
                   :total="total"
                   :page-sizes="[100, 150, 200, 300, 500]"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   layout="prev, pager, next, sizes, total"
                   background></el-pagination>
    <!--模态框-->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogVisible"
               center width="350px"
               :close-on-press-escape="false"
               :close-on-click-modal="false">
      <el-form size="mini" :model="dialogForm" :rules="dialogRules" status-icon ref="dialogForm">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="dialogForm.name" autocomplete="off" placeholder="权限名称"></el-input>
        </el-form-item>
        <el-form-item label="标识" :label-width="formLabelWidth" prop="url">
          <el-input v-model="dialogForm.url" autocomplete="off" placeholder="权限标识"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
          <el-select v-model="dialogForm.type" placeholder="请选择权限类型">
            <el-option label="目录" :value="0"></el-option>
            <el-option label="菜单" :value="1"></el-option>
            <el-option label="按钮" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父级ID" :label-width="formLabelWidth" prop="parentId">
          <el-input v-model="dialogForm.parentId" autocomplete="off" placeholder="父级ID"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="handleEdit('dialogForm')" :loading="dialogButtonLoading">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listPermission, editPermission, deletePermission } from '@/api/permission'
  import { formatDate } from '@/utils/cliUtils'

  export default {
    name: 'index',
    filters: {
      typeTypeFilter(status) {
        const statusMap = {
          0: '',
          1: 'success',
          2: 'info'
        }
        return statusMap[status]
      },
      typeTextFilter(status) {
        const statusTextMap = {
          0: '目录',
          1: '菜单',
          2: '按钮'
        }
        return statusTextMap[status]
      }
    },
    data() {
      return {
        tableData: [],
        tableLoading: true,
        searchForm: {
          name: ''
        },
        searchButtonLoading: false,
        currentPage: 1,
        pageSize: 100,
        total: 0,
        dialogVisible: false,
        dialogTitle: '',
        dialogForm: {
          id: '',
          name: '',
          url: '',
          type: '',
          parentId: ''
        },
        formLabelWidth: '65px',
        dialogRules: {
          name: [
            { required: true, message: '请输入权限名称', trigger: 'blur' }
          ],
          url: [
            { required: true, message: '请输入权限标识', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请输入权限类型', trigger: 'blur' }
          ],
          parentId: [
            { required: true, message: '请输入权限父级ID', trigger: 'blur' }
          ]
        },
        dialogButtonLoading: false,
        multipleSelection: [],
        ids: ''
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.tableLoading = true
        listPermission({
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          name: this.searchForm.name
        }).then(response => {
          this.tableData = response.data
          this.total = response.total
          this.tableLoading = false
          this.searchButtonLoading = false
        }).catch(() => {
          this.tableLoading = false
          this.searchButtonLoading = false
        })
      },
      createTimeFormatter(row) {
        let date = new Date(row.createTime)
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
      updateTimeFormatter(row) {
        let date = new Date(row.updateTime)
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
      handleSearch() {
        this.searchButtonLoading = true
        this.fetchData()
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData()
      },
      showDialogForm(row) {
        this.dialogVisible = true
        if (row == undefined) {
          this.dialogTitle = '添加权限'
          this.dialogForm.id = ''
          this.dialogForm.name = ''
          this.dialogForm.url = ''
          this.dialogForm.type = ''
          this.dialogForm.parentId = ''
        } else {
          this.dialogTitle = '更新权限'
          this.dialogForm.id = row.id
          this.dialogForm.name = row.name
          this.dialogForm.url = row.url
          this.dialogForm.type = row.type
          this.dialogForm.parentId = row.parentId
        }
      },
      handleEdit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogButtonLoading = true
            editPermission(this.dialogForm).then(response => {
              this.$message({ type: 'success', message: response.msg })
              this.dialogVisible = false
              this.fetchData()
              this.dialogButtonLoading = false
            }).catch(() => {
              this.dialogButtonLoading = false
            })
          } else {
            return false
          }
        })
      },
      handleDelete(id) {
        this.ids = ''
        if (id !== undefined) {
          this.ids = id
        } else {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            this.ids += this.multipleSelection[i] + ','
          }
        }
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning',
          cancelButtonText: '取消',
          confirmButtonText: '确认'
        }).then(() => {
          deletePermission({ ids: this.ids }).then(response => {
            this.$message({ type: 'success', message: response.msg })
            this.fetchData()
          }).catch(() => {
          })
        }).catch(() => {
          // 选择了取消操作
        })
      },
      handleSelectionChange(val) {
        for (let i = 0; i < val.length; i++) {
          if (this.multipleSelection.indexOf(val[i].id) === -1) {
            this.multipleSelection.push(val[i].id)
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-pagination {
    margin-left: -10px;
    margin-top: 5px;
  }

  .el-select {
    width: 100%;
  }
</style>
